<template>
  <div class="body0">
    <el-card style="margin: 0 auto;padding: 0">
      <div class="searchbar">
        <img class="biglogo" src="../../assets/imgs/logo-01-b-01.png">
        <el-button style="float: right;margin-top: 15px;margin-left: 20px;"  icon="el-icon-shopping-cart-2" @click="tocart">我的购物车</el-button>
        <el-button style="float: right;margin-top: 15px;margin-left: 20px;"  icon="el-icon-shopping-bag-2" @click="toorder">我的订单</el-button>
        <div class="search" style="width: 450px;">
          <el-input placeholder="请输入商品名" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
    </el-card>
    <div class="middle">
      <div class="category">
        <el-row gutter="20">
          <el-col span="4">
            <el-card style="height: 400px;">
              <div style="height: 100px;">
                <h1 class="words"><a class="linka" href="">健身器材</a></h1>
                <span class="smallwords"><a class="linka" href="">室外器材</a></span><el-divider direction="vertical"></el-divider><span class="smallwords"><a class="linka" href="">室内器材</a></span>
                <el-divider class="divider1"></el-divider>
              </div>
              <div style="height: 100px;">
                <h1 class="words"><a class="linka" href="">健身服饰</a></h1>
                <span class="smallwords"><a class="linka" href="">男装</a></span><el-divider direction="vertical"></el-divider><span class="smallwords"><a class="linka" href="">女装</a></span>
                <el-divider></el-divider>
              </div>
              <div style="height: 100px;">
                <h1 class="words"><a class="linka" href="">智能穿戴</a></h1>
                <span class="smallwords"><a class="linka" href="">手环</a></span><el-divider direction="vertical"></el-divider><span class="smallwords"><a class="linka" href="">手表</a></span><el-divider direction="vertical"></el-divider><span class="smallwords"><a class="linka" href="">耳机</a></span>
                <el-divider></el-divider>
              </div>
              <div style="height: 100px;">
                <h1 class="words"><a class="linka" href="">减脂代餐</a></h1>
                <span class="smallwords"><a class="linka" href="">减脂餐</a></span><el-divider direction="vertical"></el-divider><span class="smallwords"><a class="linka" href="">蛋白粉</a></span>
              </div>
            </el-card>
          </el-col>
          <el-col span="12">
            <el-card class="banner" style="height: 400px;padding: 0">
              <el-carousel height="400px">
                <el-carousel-item><img style="width: 100%" src="../../assets/stx-mall/banner/img.png"></el-carousel-item>
                <el-carousel-item><img style="width: 100%" src="../../assets/stx-mall/banner/img_1.png"></el-carousel-item>
              </el-carousel>
            </el-card>
          </el-col>
          <el-col span="4">
            <el-card class="banner" style="height: 400px;">
              <img style="height: 130px;width: 180px;" src="../../assets/stx-mall/banner2/img_4.png">
              <img style="height: 130px;width: 180px;" src="../../assets/stx-mall/banner2/img_4.png">
              <img style="height: 130px;width: 180px;" src="../../assets/stx-mall/banner2/img_4.png">
            </el-card>
          </el-col>
          <el-col span="4">
            <el-card style="height: 400px;">
              <div class="block"><el-avatar :size="70" :src="circleUrl"></el-avatar></div>
              <p style="margin: 10px;">Hi~XXX</p>
              <p style="margin: 10px;">积分：100</p>
              <el-button style="margin-bottom: 10px;width: 150px;" type="primary">已签到100天</el-button>
              <el-button style="background-color: rgb(255,37,27);color: white;margin: 0 auto;width: 150px;">立即开通商城会员</el-button>
              <!--小功能开始-->
              <div class="little-function">
                <el-row style="margin: 0 auto" gutter="10">
                  <el-col span="12">
                    <a style="text-decoration: none;color: black" href="http://localhost:8080/mall/order">
                      <div style="text-align: center">
                        <h1 style="color: rgb(255,37,27);font-size: 3px;margin: 5px 0 0 0">160</h1>
                        <h1 style="font-size: 10px;margin: 0 0 5px 0">待收货</h1>
                      </div>
                    </a>
                  </el-col>
                  <el-col span="12">
                    <a style="text-decoration: none;color: black" href="">
                      <div style="text-align: center">
                        <h1 style="color: rgb(255,37,27);font-size: 3px;margin: 5px 0 0 0">160</h1>
                        <h1 style="font-size: 10px;margin: 0 0 5px 0">待发货</h1>
                      </div>
                    </a>
                  </el-col>
                </el-row>
                <el-row style="margin: 0 auto" gutter="10">
                  <el-col span="12">
                    <a style="text-decoration: none;color: black" href="">
                      <div style="text-align: center">
                        <h1 style="color: rgb(255,37,27);font-size: 3px;margin: 5px 0 0 0">160</h1>
                        <h1 style="font-size: 10px;margin: 0 0 5px 0">待评价</h1>
                      </div>
                    </a>
                  </el-col>
                  <el-col span="12">
                    <a style="text-decoration: none;color: black" href="">
                      <div style="text-align: center">
                        <h1 style="color: rgb(255,37,27);font-size: 3px;margin: 5px 0 0 0">160</h1>
                        <h1 style="font-size: 10px;margin: 0 0 5px 0">待付款</h1>
                      </div>
                    </a>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px;" gutter="10">
                  <el-col span="12">
                    <a style="text-decoration: none;color: black" href="http://localhost:8080/mall/order">
                      <div style="text-align: center">
                        <el-icon class="el-icon-star-off"></el-icon>
                        <h1 style="font-size: 10px;margin: 0 0 5px 0">我的订单</h1>
                      </div>
                    </a>
                  </el-col>
                  <el-col span="12">
                    <a style="text-decoration: none;color: black" href="">
                      <div style="text-align: center">
                        <el-icon class="el-icon-time"></el-icon>
                        <h1 style="font-size: 10px;margin: 0 0 5px 0">我的足迹</h1>
                      </div>
                    </a>
                  </el-col>
                </el-row>
              </div>
              <!--小功能结束-->
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--优惠券轮播图开始-->
    <div style="height: 150px;width: 1190px;margin: 0 auto">
      <el-carousel height="150px">
        <el-carousel-item><img style="width: 100%;height: 100%" src="../../assets/stx-mall/banner3/img_2.png"></el-carousel-item>
        <el-carousel-item><img style="width: 100%;height: 100%" src="../../assets/stx-mall/banner3/img_1.png"></el-carousel-item>
      </el-carousel>
    </div>
    <!--优惠券轮播图结束-->

    <!--秒杀商品开始-->
    <div class="detail" style="width: 1190px;margin: 0 auto;">
      <p style="font-weight: bold;font-size: 40px;">--每日秒杀--</p>
      <el-row v-for="item in 2" gutter="20">
        <el-col v-for="item in 6" style="margin-bottom: 20px;" span="4">
          <a href="http://localhost:8080/mall/detail">
            <el-card style="height: 270px;">
              <img class="detail-img" src="../../assets/stx-mall/detail/img.png">
              <p class="detail-brief">跑步机家用降噪可折叠免安装宽大跑台</p>
              <span class="detail-price" >￥1549</span>
              <span class="detail-old-price">原价：9999</span>
              <span class="detail-sale-count">销量：999</span>
            </el-card>
          </a>
        </el-col>
      </el-row>
      <el-pagination
          style="float: right"
          background
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>
    <!--秒杀商品结束-->

    <!--商品列表开始-->
    <div class="detail" style="width: 1190px;margin: 0 auto;">
      <p style="font-weight: bold;font-size: 40px;">--为你推荐--</p>
      <el-row v-for="item in 2" gutter="20">
        <el-col v-for="item in 6" style="margin-bottom: 20px;" span="4">
          <a href="">
            <el-card style="height: 270px;">
              <img class="detail-img" src="../../assets/stx-mall/detail/img.png">
              <p class="detail-brief">跑步机家用降噪可折叠免安装宽大跑台</p>
              <span class="detail-price" >￥1549</span>
              <span class="detail-old-price">原价：9999</span>
              <span class="detail-sale-count">销量：999</span>
            </el-card>
          </a>
        </el-col>
      </el-row>
      <el-pagination
          style="float: right"
          background
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>
    <!--商品列表结束-->
  </div>

</template>
<script>
export default {
  data(){
    return{
      bannersArr:[]
    }
  },
  methods:{
    tocart(){
      this.$router.push('cart')
    },
    toorder(){
      this.$router.push('order')
    },
  }
}
</script>
<style>
.little-function{
  margin: 20px 0 20px 0;
}
.detail-sale-count{
  float: right;font-size: 15px;
}
.detail-old-price{
  float: right;text-decoration: line-through;font-size: 5px;color: rgba(0,0,0,0.5);margin-top: 10px;
}
.detail-price{
  float: left; font-size: 20px;font-weight: bold;color: rgb(255,37,27);margin-top: 25px;
}
.detail-brief{
  font-size: 4px;text-align: left;text-decoration-line: none;
}
.detail-img{
  width: 160px;
}
.detail .el-card__body{
  padding: 10px;text-align: left;
}
.searchbar{
  width: 900px;margin: 0 auto;height: 70px;
}
.search{
  float: right;margin-top: 15px;
}
.biglogo{
  width: 100px;float: left;
}
.middle{
  width: 1190px;margin: 0 auto;
}
.category{
 margin: 20px 0 20px 0;
}
.category .el-card__body{
  padding: 10px;
}
.el-main{
  margin: 0;padding: 0;
}
.category-pic{
  width: 179px;height: 100px;
}
.words{
  font-weight: bold;background: rgba(255,255,255,0.5);margin: 5px 0 5px 0;
}
.smallwords{
  font-size: 10px;
}
.linka{
  text-decoration: none;color: black;
}
.el-divider1{
  margin: 10px 0 10px 0 ;
}
.banner .el-card__body{
  padding: 0;
}
.el-carousel__item is-animating{
  height: 150px;
}

</style>